<template>
  <div class="profile-page">
    <!-- 个人信息头部 -->
    <el-card class="profile-header">
      <div class="user-info">
        <el-avatar :size="80" :src="userInfo.avatar" />
        <div class="info-text">
          <h1>{{ userInfo.name }}</h1>
          <p class="user-meta">
            <span>学号：{{ userInfo.studentId }}</span>
            <span>加入时间：{{ userInfo.joinDate }}</span>
          </p>
        </div>
      </div>
      <div class="profile-actions">
        <el-button type="primary" @click="editProfile">编辑资料</el-button>
        <el-button @click="exportData">导出学习数据</el-button>
      </div>
    </el-card>

    <!-- 主要内容区域 -->
    <el-row :gutter="20" class="profile-content">
      <!-- 左侧数据统计 -->
      <el-col :span="16">
        <!-- 学习概览 -->
        <el-card class="overview-card">
          <template #header>
            <h3>学习概览</h3>
          </template>
          <el-row :gutter="20">
            <el-col :span="8" v-for="stat in learningStats" :key="stat.label">
              <div class="stat-item">
                <div class="stat-value">{{ stat.value }}</div>
                <div class="stat-label">{{ stat.label }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 课程进度 -->
        <el-card class="courses-card">
          <template #header>
            <h3>课程进度</h3>
          </template>
          <div class="course-progress" v-for="course in courses" :key="course.id">
            <div class="course-info">
              <el-icon :color="course.iconColor">
                <component :is="course.icon" />
              </el-icon>
              <span class="course-name">{{ course.name }}</span>
              <el-tag :type="course.tagType" size="small">
                {{ course.status }}
              </el-tag>
            </div>
            <el-progress 
              :percentage="course.progress"
              :status="course.progress === 100 ? 'success' : ''"
            />
          </div>
        </el-card>

        <!-- 学习记录 -->
        <el-card class="history-card">
          <template #header>
            <div class="card-header">
              <h3>学习记录</h3>
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <v-chart class="chart" :option="activityChartOption" autoresize />
        </el-card>
      </el-col>

      <!-- 右侧设置和成就 -->
      <el-col :span="8">
        <!-- 个人设置 -->
        <el-card class="settings-card">
          <template #header>
            <h3>学习设置</h3>
          </template>
          <div class="setting-item">
            <span class="setting-label">每日学习目标</span>
            <el-input-number 
              v-model="settings.dailyGoal" 
              :min="1" 
              :max="12"
              size="small"
            /> 小时
          </div>
          <div class="setting-item">
            <span class="setting-label">提醒时间</span>
            <el-time-select
              v-model="settings.reminderTime"
              placeholder="选择时间"
              size="small"
            />
          </div>
          <div class="setting-item">
            <span class="setting-label">难度偏好</span>
            <el-select v-model="settings.difficulty" size="small">
              <el-option label="简单优先" value="easy" />
              <el-option label="循序渐进" value="normal" />
              <el-option label="挑战优先" value="hard" />
            </el-select>
          </div>
          <el-button type="primary" @click="saveSettings" class="save-btn">
            保存设置
          </el-button>
        </el-card>

        <!-- 成就徽章 -->
        <el-card class="achievements-card">
          <template #header>
            <h3>我的成就</h3>
          </template>
          <el-row :gutter="12">
            <el-col :span="8" v-for="badge in achievements" :key="badge.id">
              <div class="badge-item" :class="{ locked: !badge.unlocked }">
                <el-tooltip :content="badge.description" placement="top">
                  <el-icon :size="32" :color="badge.unlocked ? badge.color : '#909399'">
                    <component :is="badge.icon" />
                  </el-icon>
                </el-tooltip>
                <div class="badge-name">{{ badge.name }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 学习目标 -->
        <el-card class="goals-card">
          <template #header>
            <h3>学习目标</h3>
          </template>
          <div class="goal-list">
            <div v-for="goal in goals" :key="goal.id" class="goal-item">
              <div class="goal-info">
                <el-icon><component :is="goal.icon" /></el-icon>
                <span>{{ goal.content }}</span>
              </div>
              <el-progress 
                :percentage="goal.progress"
                :status="goal.progress === 100 ? 'success' : ''"
                :stroke-width="8"
              />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑资料对话框 -->
    <el-dialog
      v-model="showEditDialog"
      title="编辑个人资料"
      width="500px"
    >
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="昵称">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="editForm.avatar" :src="editForm.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input
            v-model="editForm.bio"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showEditDialog = false">取消</el-button>
          <el-button type="primary" @click="saveProfile">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'

// 注册 ECharts 必要组件
use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
])

// 用户基本信息
const userInfo = ref({
  name: '康赟',
  studentId: '2021123456',
  avatar: 'https://placeholder.com/80x80',
  joinDate: '2023-09-01'
})

// 学习统计数据
const learningStats = ref([
  { label: '总学习时长', value: '168小时' },
  { label: '已完成知识点', value: '286个' },
  { label: '练习题正确率', value: '85%' }
])

// 课程进度数据
const courses = ref([
  {
    id: 1,
    name: '数据结构与算法',
    icon: 'Connection',
    iconColor: '#409EFF',
    progress: 75,
    status: '进行中',
    tagType: 'warning'
  },
  {
    id: 2,
    name: '计算机网络',
    icon: 'Monitor',
    iconColor: '#67C23A',
    progress: 45,
    status: '进行中',
    tagType: 'warning'
  },
  {
    id: 3,
    name: '计算机组成原理',
    icon: 'Cpu',
    iconColor: '#E6A23C',
    progress: 30,
    status: '进行中',
    tagType: 'warning'
  },
  {
    id: 4,
    name: '操作系统',
    icon: 'Monitor',
    iconColor: '#F56C6C',
    progress: 20,
    status: '未开始',
    tagType: 'info'
  }
])

// 学习记录图表配置
const timeRange = ref('week')
const activityChartOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value',
    name: '学习时长(小时)'
  },
  series: [{
    data: [3, 4, 2, 5, 3, 6, 4],
    type: 'line',
    smooth: true,
    areaStyle: {}
  }]
})

// 个人设置
const settings = ref({
  dailyGoal: 4,
  reminderTime: '09:00',
  difficulty: 'normal'
})

// 成就徽章
const achievements = ref([
  {
    id: 1,
    name: '学习达人',
    icon: 'Trophy',
    color: '#F7BA2A',
    description: '连续学习30天',
    unlocked: true
  },
  {
    id: 2,
    name: '题王',
    icon: 'Medal',
    color: '#409EFF',
    description: '完成1000道练习题',
    unlocked: true
  },
  {
    id: 3,
    name: '知识专家',
    icon: 'Star',
    color: '#67C23A',
    description: '掌握所有核心知识点',
    unlocked: false
  }
])

// 学习目标
const goals = ref([
  {
    id: 1,
    content: '完成数据结构课程学习',
    icon: 'Connection',
    progress: 75
  },
  {
    id: 2,
    content: '提高练习题正确率至90%',
    icon: 'Aim',
    progress: 60
  },
  {
    id: 3,
    content: '参加期末模拟考试',
    icon: 'Edit',
    progress: 0
  }
])

// 编辑资料相关
const showEditDialog = ref(false)
const editForm = ref({
  name: '',
  avatar: '',
  bio: ''
})

const editProfile = () => {
  editForm.value = {
    name: userInfo.value.name,
    avatar: userInfo.value.avatar,
    bio: userInfo.value.bio || ''
  }
  showEditDialog.value = true
}

const handleAvatarSuccess = (res) => {
  editForm.value.avatar = res.url
}

const saveProfile = () => {
  // 这里应该调用API保存个人资料
  userInfo.value = {
    ...userInfo.value,
    name: editForm.value.name,
    avatar: editForm.value.avatar
  }
  showEditDialog.value = false
}

const saveSettings = () => {
  // 这里应该调用API保存设置
  console.log('保存设置:', settings.value)
}

const exportData = () => {
  // 这里应该调用API导出学习数据
  console.log('导出学习数据')
}
</script>

<style scoped>
.profile-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.profile-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.info-text h1 {
  margin: 0 0 8px 0;
  color: var(--text-primary);
}

.user-meta {
  color: var(--text-secondary);
  display: flex;
  gap: 20px;
}

.profile-actions {
  display: flex;
  gap: 12px;
}

.profile-content > * {
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px 0;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--primary-color);
}

.stat-label {
  color: var(--text-secondary);
  margin-top: 8px;
}

.course-progress {
  margin-bottom: 20px;
}

.course-progress:last-child {
  margin-bottom: 0;
}

.course-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.course-name {
  flex: 1;
}

.chart {
  height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.setting-label {
  color: var(--text-regular);
}

.save-btn {
  width: 100%;
  margin-top: 16px;
}

.badge-item {
  text-align: center;
  padding: 12px;
}

.badge-item.locked {
  opacity: 0.5;
}

.badge-name {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-regular);
}

.goal-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.goal-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.avatar-uploader {
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
}
</style> 